import React, { useEffect, useRef, useState, useMemo, useCallback } from 'react'
import CommonList2 from '../../components/CommonList2'
import { useApi } from '../../api'
import { message } from 'antd'

const MyList = React.memo(CommonList2)

//表头数据
const tableHead = ['序号', '标题', '背景图', '发布时间', '类型', '状态']

function ArticleExamine() {
  const { getAllArticle, changeArticleStatus } = useApi()

  //新闻数据
  const [list, setList] = useState([])
  const [a, seta] = useState(0)
  const dataList = useRef([])
  //获取数据,由于分堆生成列表重新获取数据渲染生成新列表太耗费性能，没必要重新请求，直接把发布的新闻删掉就行了
  const getData = useCallback(id => {
    const data = [...dataList.current]

    dataList.current = data.filter(item => {
      return item.id != id
    })
    setList(dataList.current)
  }, [])

  useEffect(() => {
    ;(async () => {
      try {
        let res = await getAllArticle()
        dataList.current = res
        setList(res)
      } catch (error) {
        message.error('异常')
        console.log('err', error)
      }
    })()
  }, [])

  return (
    <>
      <MyList list={list} changeArticleStatus={changeArticleStatus} getData={getData}>
        <ul className="flex justify-around bg-[#fafafa]">
          {tableHead.map(item => {
            return (
              <li
                className=" text-[.175rem] w-[100%] h-[.85rem] flex justify-center items-center font-bold border-r-[.025rem] border-solid border-[#edf2fa]"
                key={item}
              >
                {item}
              </li>
            )
          })}
        </ul>
      </MyList>
    </>
  )
}

export default ArticleExamine
